<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<div id="app">
	</div>

	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/* 
		具名插槽的作用：可以在组件里面留插槽，以便在调用组件的时候可以动态往里填充，不写死
		还有一个作用域插槽：父组件替换插槽的标签，但是内容由子组件来提供
		*/
		/* 
			插槽是组件化的一种方式，在一个组件中定义好了插槽，要想用它，先调用组件，再在组件里面调用插槽
		 */
		Vue.component('myLi', {
			template: `
					<div>
						<li>
							预留的第一个坑
							<!--里面可以写默认值-->
							<slot name='one'>默认值</slot>
							预留的第二个坑
							<slot name='two'></slot>
						</li>

					</div>
				`,
		});

		//1.声明局部组件(声子)
		var App = {
			//组件必有一个模板
			template: `
					<div>
						<ul>
							<!--这里在使用全局组件-->
							<!--使用组件，并可以在里面定义内容-->
							<myLi>
								<h2 slot='one'>第一个</h2>
								<h2 slot='two'><button>第二个</button></h2>
							</myLi>
						</ul>
					</div>
				`,
			components: {
			},
			data() {
				return {
					msg: fhigh
				}
			}
		};
		new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			//2.挂载局部组件(挂子)
			components: {
				App
			},
			//3.用子
			template: '<App />'
		});
	</script>
</body>

</html>